<template>
	<view class="luckly-wheel-container">
		<view class="header">
			<image :src="$IMG+'/images/luck-back.png'"></image>
		</view>
		<view class="main">
			<view class="row-end">
				<navigator class="user-prize row-center" url="/pages/luck-draw/prize-record" hover-class="none">
					<text class="md" style="color: #7D350C;font-weight: 600;">我的奖品</text>
				</navigator>
			</view>
			<view class="wheel-box">
				<view class="wheel-container">
					<view class="row-center">
						<view class="notice-container row">
							<image :src="$IMG+'/images/icon_notice.png'" class="icon"></image>
							<view class="marquee-box ml20" v-if="record.length > 0">
								<swiper autoplay vertical style="height: 33rpx">
									<swiper-item v-for="(item, index) in record" :key="index" class="row">
										<text class="xs marquee_text" style="color: #F9EDDD;">{{item.text}}</text>
									</swiper-item>
								</swiper>
							</view>
							<view class="xs ml20" style="color: #F9EDDD" v-else>
								<text class="xs" style="color: #F9EDDD;">暂无通知</text>
							</view>
						</view>
					</view>
					<view class="wheel">
						<my-lottery :lotteryData="lists" :status="status" :luckyOrder="3" :circleTimes="30"
							@begin="startLottery" @finish="lotteryFinish"></my-lottery>
					</view>
					<view class="rules-box">
						<view class="lg" style="color: #FCD7D2;margin-bottom: 30rpx;">活动规则</view>
						<text class="sm" style="color: #FCD7D2;">{{rule}}
						</text>
					</view>
				</view>
			</view>
			<view class="xs row-center" style="color: #FFF2D9;margin-top: 30rpx">本活动的所有奖品，均由本平台提供</view>
		</view>
		<u-popup v-model="showResult" mode="center">
			<view class="result-popup column-center">
				<view class="result-container column-between">
					<view class="row-center" style="padding:0 118rpx;margin-top: 90rpx">
						<text style="color: #F95F2F;font-size: 62rpx;text-align: center;">{{resultText}}</text>
					</view>
					<view class="mb20">
						<view class="get-btn row-center md br60" @tap="onClose">
							知道啦
						</view>
					</view>
				</view>
				<view style="margin-top: 50rpx" @tap="onClose">
					<image :src="$IMG+'/images/icon_close.png'" style="width: 62rpx;height: 62rpx;"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import luckDraw from "@/components/my-lottery/my-lottery.vue"
	export default {
		data() {
			return {
				$IMG: this.$IMG,
				status: '',
				rule: '',
				// 抽奖列表
				lists: [],
				// 通知信息
				record: [],
				// 今天剩余抽奖
				surplus: 0,
				showResult: false,
				// 抽奖结果
				resultText: "",
				//积分
				integral: false,
			};
		},
		components: {
			luckDraw
		},
		onLoad: function(options) {
			this.getPrizeFun();
		},
		methods: {
			getPrizeFun() {
				this.$H
					.get('luckDraw/getPrize').then(res => {
						if (res.code == 0) {
							let {
								status,
								rule,
								list,
								record,
								surplus,
								integral
							} = res.result;

							this.rule = rule;
							this.status = status;
							this.lists = list;
							this.record = record;
							this.surplus = surplus;
							this.integral = integral;
							if (!integral) {
								this.$f.toast("积分不足")
							}
						}
					});

			},

			onClose() {
				this.showResult = false
			},

			startLottery(e) {
				this.getPrizeFun();
			},

			lotteryFinish(e) {
				this.showResult = true;
				this.resultText = e.detail
			}

		}
	};
</script>

<style lang="scss">
	.icon {
		min-height: 34rpx;
		min-width: 34rpx;
		height: 34rpx;
		width: 34rpx;
		vertical-align: middle;
	}

	.row {
		display: flex;
		align-items: center;
	}

	.row-end {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.column-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.column-between {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.md {
		font-size: 30rpx;
	}

	.bg-white {
		background-color: #F4F4F5;
	}

	.white {
		color: #F4F4F5;
	}

	.normal {
		color: #333333;
	}

	.ml20 {
		margin-left: 20rpx;
	}

	.lg {
		font-size: 32rpx;
	}

	.sm {
		font-size: 26rpx;
	}

	.xs {
		font-size: 24rpx;
	}

	.mr5 {
		margin-right: 5rpx;
	}

	.xxl {
		font-size: 36rpx;
	}

	.mb20 {
		margin-bottom: 20rpx;
	}

	.row-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.br60 {
		border-radius: 60rpx;
	}

	.ml10 {
		margin-left: 10rpx;
	}

	.ml5 {
		margin-left: 5rpx;
	}

	.luckly-wheel-container {
		background-color: #FFFFFF;
		padding-bottom: 20rpx;

		.header {
			width: 100%;
			height: 1108rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.main {
			margin-top: -810rpx;
			position: relative;

			.user-prize {
				padding: 20rpx;
				background-color: #FEF0B5;
				border-radius: 100rpx 0rpx 0rpx 100rpx;
				box-shadow: 0px 3px 0px #F95F2F;
			}

			.wheel-box {
				padding: 0 30rpx;

				.wheel-container {
					padding: 27rpx 15rpx 36rpx;
					background-color: #ED3720;
					border: 12rpx solid #FE6847;
					margin-top: 20rpx;
					border-radius: 30rpx;

					.notice-container {
						background-color: #D30C16;
						border: 2rpx solid #EDB17D;
						padding: 13rpx 28rpx;
						border-radius: 100rpx;
						width: 586rpx;

						.marquee-box {
							width: 500rpx;
							height: 33rpx;
						}
					}

					.wheel {
						margin-top: 20rpx;

						.lottery-box {
							background-image: url();
							width: 560rpx;
							height: 560rpx;
							background-size: 100% 100%;
							padding: 35rpx 40rpx;
						}
					}

					.rules-box {
						margin-top: 24rpx;
						background-color: #D30C16;
						padding: 20rpx 16rpx 20rpx 28rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
	}

	.luckly-wheel-container .van-popup {
		background-color: rgba(0, 0, 0, 0);
	}

	.result-popup {
		width: 545rpx;
		height: 626rpx;
		background-color: #ff1433;

		.result-container {
			width: 545rpx;
			height: 514rpx;
			background-size: 100% 100%;
			background-image: url(/static/images/lottery_bg.png);
		}
	}

	.get-btn {
		width: 320rpx;
		height: 70rpx;
		color: #7B3200;
		background: linear-gradient(180deg, #FEF0B0 0%, #FFA92E 100%);
	}
</style>